<template>
  <div class="view-fill">
    <div class="app-container-flex">
      <NewFullScreen
        v-model="showDialog"
        :title="title"
        :btnList="fullInfo.btnList"
      >
        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t('basic_information') }}</p>
          </div>
          <div class="model-panel-body">
            <PageForm
              class="paddingBox order-model-formBox flex_wrap_start_start"
              v-model:ref-obj="formInfo.ref"
              :data="formInfo.data"
              :field-list="formInfo.fieldList"
              :rules="formInfo.rules"
              :label-width="formInfo.labelWidth"
              :list-type-info="listTypeInfo"
            >
              <template v-slot:form-userName>
                <el-input
                  v-model="formInfo.data.userName"
                  type="input"
                  :disabled="true"
                  class="not-mongolia"
                  placeholder="请选择人员"
                >
                  <template #append>
                    <el-icon @click="openUserList"><MoreFilled /></el-icon>
                  </template>
                </el-input>
              </template>
              <template v-slot:form-deptName>
                <el-input
                  v-model="formInfo.data.deptName"
                  type="input"
                  :disabled="true"
                  class="not-mongolia"
                  placeholder="请选择授权部门"
                >
                <template #append>
                  <el-icon @click="openDeptWindow"><MoreFilled /></el-icon>
                </template>
                </el-input>
              </template>
            </PageForm>
          </div>
        </div>
      </NewFullScreen>
    </div>

    <SelectNoAuthUsers
      v-if="selectUserInfo.visible"
      v-model:showDialog="selectUserInfo.visible"
      v-model:query="selectUserInfo.query"
      :api="getPendRepairUserList"
      :saveEmpty="true"
      :check-box="false"
      :highlight-row="true"
      @callback="selectUserCallBack"
    />
  </div>
</template>

<script setup name="repairUserModify">
import { getPendRepairUserList } from '@/api/repair.js'
import SelectNoAuthUsers from '@/components/SelectUsers/selectNoAuthUsers'
import {
  createRepairUser,
  updateRepairUser,
  getRepairUserById,
} from '@/api/repair'
const { proxy } = getCurrentInstance()
const emits = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: () => {
      return ''
    },
  },
  id: {
    type: String,
    default: () => {
      return 0
    },
  },
})
const selectUserInfo = ref({
  visible: false,
  saveEmpty: true,
  query: {
    type: 'normal',
  },
})
const formInfo = ref({
  ref: null,

  data: {},

  fieldList: [
    {
      label: '人员名称',
      value: 'userName',
      type: 'slot',
      required: true,
    },
    {
      label: '联系电话',
      value: 'tel',
      type: 'input',
      disabled: true,
    },
    {
      label: '部门',
      value: 'deptName',
      type: 'input',
      disabled: true,
    },
  ],

  labelWidth: '120px',
})
const listTypeInfo = ref({
  licenseList: [],
  brandList: [],
  unitList: [],
})
const options = ref([])
const fullInfo = ref({
  btnList: [{ label: '保存', event: save, show: true }],
})

const showDialog = computed({
  get() {
    return props.visible
  },
  set(val) {
    emits('update:visible', val) // 更新父组件visible
  },
})

function openUserList() {
  selectUserInfo.value.visible = true
}
function selectUserCallBack(row) {
  if (row) {
    formInfo.value.data['userId'] = row.id
    formInfo.value.data['userName'] = row.name
    formInfo.value.data['deptName'] = row.deptName
    formInfo.value.data['deptId'] = row.deptId
    if (row.tel) {
      formInfo.value.data['tel'] = row.tel
    } else {
      formInfo.value.data['tel'] = ''
    }
  } else {
    formInfo.value.data['userId'] = ''
    formInfo.value.data['userName'] = ''
    formInfo.value.data['deptName'] = ''
    formInfo.value.data['deptId'] = ''
    formInfo.value.data['tel'] = ''
  }
}
// 初始化校验规则
function initRules() {
  formInfo.value.rules = proxy.$initRules(formInfo.value.fieldList)
}

function save() {
  formInfo.value.ref.validate((valid) => {
    if (valid) {
      let api
      const params = {
        ...formInfo.value.data,
      }
      let type
      if (props.id) {
        api = updateRepairUser
        type = 'update'
      } else {
        api = createRepairUser
        type = 'create'
      }
      proxy
        .$handleAPI(type, api, params)
        .then((res) => {
          if (res.success) {
            showDialog.value = false
            emits('returnModify', false)
          }
        })
        .catch(() => {})
    }
  })
}
function getDetails() {
  getRepairUserById(props.id).then((resp) => {
    if (resp && resp.success) {
      formInfo.value.data = resp.data
    }
  })
}
initRules()
onMounted(() => {
  if (props.id) {
    getDetails()
  }
})
</script>

<style scoped></style>
